<template>
  <div class="courierlist">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>快递单详情</span>
      <p @click="clicktioa">提交</p>
    </div>
    <div class="box_t">
      <p class="shou">总体评分</p>
      <p class="tow">
        <span>{{ value1 }}</span
        >分
      </p>
      <van-rate
        :allow-half="true"
        :disabled="noyes"
        v-model="value1"
        :icon="zhong"
        :void-icon="wei"
        size="30"
        gutter="20"
      />
      <p class="ping">店铺评分</p>
      <div class="first">
        <span>店铺评分</span>
        <van-rate
          v-model="value2"
          allow-half
          void-icon="star"
          void-color="#eee"
          size="25"
          gutter="10"
          color="#f4c65d"
          :disabled="noyes"
        />
      </div>
      <div class="first">
        <span>物流速度</span>
        <van-rate
          v-model="value3"
          allow-half
          void-icon="star"
          void-color="#eee"
          size="25"
          gutter="10"
          color="#f48758"
          :disabled="noyes"
        />
      </div>
      <div class="first">
        <span>快递评分</span>
        <van-rate
          v-model="value4"
          allow-half
          void-icon="star"
          void-color="#eee"
          size="25"
          gutter="10"
          color="#f45a5b"
          :disabled="noyes"
        />
      </div>
    </div>
    <div class="box_b">
      <textarea placeholder="写几句评价" v-model="info"></textarea>
      <van-field name="uploader">
        <template #input>
          <van-uploader max-count="5" v-model="uploader" />
        </template>
      </van-field>
    </div>
  </div>
</template>
 
<script>
import { Dialog } from "vant";
import { GetCourierXiaoPingXList, GetClickTijiosList } from "../request/aip";
export default {
  data() {
    return {
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      arr: "",
      // 第一行笑脸数量
      value1: 4,
      value2: 5,
      value3: 3,
      value4: 2,
      info: "",
      orderCode: "",
      id: "",
      zhong: require("../assets/总图标包含整个系统的/xiaolian.png"),
      wei: require("../assets/总图标包含整个系统的/shangxin.png"),
      //   是否禁用评分
      noyes: false,
    };
  },
  //   computed: {
  //     mydata: function () {
  //       return Number(this.value2 + this.value3 + this.value4) / 3;
  //     },
  //   },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    clicktioa() {
      if (this.arr == 0) {
        GetClickTijiosList({
          shop: Number(this.value2),
          logistics: Number(this.value3),
          express: Number(this.value4),
          totalScore: Number(this.value1),
          orderCode: this.orderCode,
          id: this.id,
          info: this.info || "无",
        }).then((res) => {
          console.log(res);
          this.$router.go(-1);
        });
      } else {
        Dialog({ message: "不可重复提交" });
      }
    },
  },
  created() {
    // console.log(this.$route.params.id);
    let arr = this.$route.params.star;
    this.arr = arr;
    let id = this.$route.params.id;
    this.id = id;
    this.orderCode = this.$route.params.orderCode;
    console.log(this.$route.params.star, this.$route.params.id);
    if (arr == 1) {
      GetCourierXiaoPingXList({
        id,
      }).then((res) => {
        console.log(res);
        this.value1 = res.data.totalScore;
        this.value2 = res.data.shop;
        this.value3 = res.data.logistics;
        this.value4 = res.data.express;
        this.uploader = res.data.imgs;
        this.info = res.data.info;
        this.orderCode = res.data.orderCode;
        this.id = res.data.id;
      });
    }
  },
};
</script>
 
<style lang = "less" scoped>
.courierlist {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  .box_t {
    padding: 10px;
    background-color: #fff;
    text-align: center;
    margin-bottom: 10px;
    .shou {
      color: #ccc;
      margin-bottom: 8px;
    }
    .tow {
      color: #f4cf62;
      margin-bottom: 10px;
      span {
        font-size: 30px;
        margin-right: 5px;
      }
    }
    .van-rate {
      margin-bottom: 12px;
    }
    .ping {
      text-align: left;
      /* background-color: #cfc; */
      padding: 10px 0;
      border-top: 1px solid #ccc;
      color: rgb(94, 88, 88);
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .first {
      padding: 10px 0 10px 25px;
      display: flex;
      border-top: 1px solid rgb(255, 246, 246);
      span {
        margin-right: 20px;
      }
    }
  }
  .box_b {
    background-color: #fff;
    padding: 15px;
    textarea {
      width: 100%;
      border: none;
      resize: none;
      height: 100px;
    }
  }
}
.van-cell {
  padding: 0;
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
}
</style>